<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>二手设备</title>
    <meta charset="UTF-8">
    <title>黑金网</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <style type="text/css">
        #topContainer {
            width: 100%;
            position: fixed;
            overflow: hidden;
            background-color: #666666;
            transition: background-color 1s;
            z-index: 1000;
        }
        #btContainer {
            position: fixed;
            background-color: #f6f6f6;
            top: 40px;
            left: 0;
            bottom: 0;
            right: 74%;
            font-size: 14px;
            color: #828282;
            overflow-y: scroll;
        }
        #btContainer-ul li {
            padding: 14px 0 14px 0;
            /* border: 1px solid red; */
            line-height: 14px;
            text-align: center;
            position: relative;
        }
        #btContainer-ul>:first-child {
            margin-top: 7px;
        }
        #listContainer {
            float: right;
            margin-top: 40px;
            width: 74%;
        }
        .btContainer-ul-icon {
            position: absolute;
            height: 14px;
            width: 4px;
            background-color: red;
            visibility: hidden;
        }
        .btContainer-ul-icon-clicked {
            font-weight: bold;
            background-color: #fff;
            color: #2c2c2c;
        }

        .ts-container {
            
        }
        .ts-container li{
            padding: 0 5px 0 5px;
            overflow: hidden;
        }
        .ts-card {
            background-color: #f8f8f8;
            overflow: hidden;
            border-radius: 3px;
            padding-bottom: 10px;
        }
        .ts-card__image {
            padding-top: 10px;
            background-color: #efefef;
            height: 150px;
        }
        .ts-card__image img{
            width: 100%;
            height: 100%;
            max-height: 200px;
        }
        .ts-card__title {
            display: inline-block;
            background-color: #CDA3B1;
            font-size: 12px;
            line-height: 26px;
            color: #FEFFFF;
            margin-left: 15px;        /* 20 * 12 / 16 */
            padding: 0;
            padding-left: 3px;
            padding-right: 3px;
            line-height: 26px;
        }
        .ts-card__description {
            background-color: #f8f8f8;
            width: 100%;
        }
        .ts-card__description--title {
            font-size: 16px;
            color: #666;
            margin-top: 14px;             /* 22 * 16 / 24 */
            line-height: 16px;
            padding: 0 10px 0 10px;
        }
        .ts-card__description--discount {
            display: inline-block;
            font-size: 12px;
            border-style: solid;
            border-width: 1px;
            border-color: #FF0000;
            color: #F00;
            margin-left: 15px;
            margin-top: 12px;
            text-align: center;
            padding: 0 2px 0 2px;
            /*84 / 346*/
        }
        .ts-card__description--pricebox {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 16px;
            font-weight: bold;
            color: #F00;

            display: flex;
            flex-direction: row;

            justify-content: space-between;
        }
        .ts-card__description--similar {
            font-size: 12px;
            border:1px solid #F00;
            color: #F00;
            border-radius: 16px;
            background-color: #ffe6eb;
            padding: 2px 5px 2px 5px;
            margin-right: 5px;
        }
        .ts-card__recommand {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 12px;

            border-top: 1px solid #e9e9e9;
            color: #818181;

            padding-top: 8px;
        }
        .ts-card__title--text {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="topContainer">
        <div id="searchContainer">
            <div class="layui-col-xs10">
                <input type="text" autocomplete="off" placeholder="请输入品名或商家名称" class="layui-input">
            </div>
            <div class="layui-col-xs2">
                <a class="layui-btn" id="searchBT" style="width: 100%;" lay-filter="searchBT">查询</a>
            </div>
        </div>
    </div>
    <div style="position: relative;overflow: hidden;">
        <div id="btContainer">
            <ul id="btContainer-ul" data-seleted_id="-1">
                <li id="l1">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l2">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l3">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l4">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l5">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l6">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l7">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l8">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l9">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l10">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l11">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l12">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                    
                </li>
                <li id="l13">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l14">
                    <div class="btContainer-ul-icon">
                    </div>
                    重型设备
                </li>
                <li id="l15"></li>
                <li id="l16"></li>
            </ul>
        </div> 
        <div id="listContainer">
            <div id="tranContainer">
                <div class="layui-col-md12">
                    <div class="layui-carousel" lay-filter="rollContent" id="rollContent">
                        <div carousel-item="">
                            <div><img id="sarousel0" src="img/img1.jpg"></div>
                            <div><img id="sarousel1" src="img/img2.jpg"></div>
                            <div><img id="sarousel2" src="img/img3.png"></div>
                        </div>
                    </div>
                </div>
             </div>

            <ul class="ts-container " id="comUL"></ul>
    </div>
    <div id="bottomContent">
        <ul id="bottomUL">
            <li classnews1.json="sureStyle">
                <i class="layui-icon">&#xe68e;</i>
                <br><span>首页</span>
            </li>
            <li>
                <i class="layui-icon" onclick="window.location.href='ddlist.html'">&#xe63c;</i>
                <br><span>订单</span>
            </li>
            <li>
                <i class="layui-icon" onclick="window.location.href='cart.html'">&#xe657;</i>
                <br><span>购物车</span>
            </li>
            <li>
                <i class="layui-icon" onclick="window.location.href='my.html'">&#xe612;</i>
                <br><span>我的</span>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel;
        carousel.render({
            elem: '#rollContent'
            , width: '100%'
            , height: '180px'
            , interval: 5000
        });
    });
</script>
<!-- 以下脚本语言为 ts 所写 -->

<script>
    function complete_file_path(file_name) {
        let prefix_path = 'classification/'
        let file_path = prefix_path + file_name

        return file_path
    }
    function render_shopping_list(json_file_path) {
        sq.setapi(json_file_path).setdata({}).sucessFun(function (rel) {
            var obj = rel.comlist;
            $("#comUL").html("");
            for (var i = 0; i < obj.length; i++) {
                $("#comUL").html($("#comUL").html() + '<li class="layui-col-xs6"><div style="" class="ts-card">' +
                    '<div class="ts-card__image">' +
                    '<img src="' + obj[i].img_url + '" /></div>' +
                    '<div style="height: 26px; margin-top:-13px; "><div class="ts-card__title">' +
                    '<div class="ts-card__title--text">' + obj[i].branch + '</div></div></div>' +
                    '<div class="ts-card__description">' +
                    '<div class="ts-card__description--title">' + obj[i].name + '</div>' +
                    '<div class="ts-card__description--pricebox">' +
                    '<div class="ts-card__description--price">' + obj[i].price + '</div>' +
                    '<div class="ts-card__description--similar">看相似</div></div></div>' +
                    '<div class="ts-card__recommand">' + obj[i].recommand + '</div></div>' +
                    '</li>'
                );
            }
        }).run()
    }

</script>

<script>
    const log = console.log.bind(this)
    // jquery
    $('#btContainer-ul').click(function(e){
        // log(this.dataset)
        // log(e)
        let target_li = e.target
        // log(target_li)
        let prev_id = this.dataset.seleted_id
        //  使之前的消失
        if( prev_id != -1) {
            log(prev_id)
            let prev_li_dom = this.querySelector('#' + prev_id)
            let prev_li_icon = prev_li_dom.querySelector('.btContainer-ul-icon')
            prev_li_icon.style.visibility = 'hidden'
            prev_li_dom.classList.remove('btContainer-ul-icon-clicked')
        }
        // 使现在的出现
        let target_li_icon = target_li.querySelector('.btContainer-ul-icon')
        target_li_icon.style.visibility = 'visible'
        target_li.classList.add('btContainer-ul-icon-clicked')
        // 更改 id 
        this.dataset.seleted_id = target_li.id

        // 渲染商品列表
        let file_name = target_li.id + '.json'
        let file_path = complete_file_path(file_name)
        render_shopping_list(file_path)
    })
    // 初始化时第一个 li 被点击
    $("#l1").trigger("click")

</script>
<!-- 以上脚本语言为 ts 所写 -->


</html>